<template>
  <div class="main-box scroll">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="角色列表"
        highlight-current-row
        :columns="columns"
        :request-api="getRoleList"
        :pagination="true"
        :show-summary="false"
        :init-param="initParam"
        :indent="20"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="">
          <el-button :icon="Plus" type="primary" @click="openDialog('addOrEditRoleRef', 0)" v-if="thisPermission.create">
            新建
          </el-button>
        </template>
        <template #operation="scope">
          <el-button type="primary" link @click="openDialog('addOrEditRoleRef', scope.row.id)" v-if="thisPermission.update">
            编辑
          </el-button>
          <el-button type="primary" link @click="deleteAccount([scope.row])" v-if="thisPermission.delete">删除</el-button>
          <el-button type="primary" link @click="openDialog('associatedUsersRef', scope.row.id)" v-if="thisPermission.user">
            关联用户
          </el-button>
        </template>
      </ProTable>
      <modalAssociatedUsers ref="associatedUsersRef" />
      <modalAddOrEdit ref="addOrEditRoleRef" @refresh="refresh" />
    </div>
  </div>
</template>

<script setup lang="ts" name="roleManagement">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Role } from "@/api/interface/roleManagement";
import { getRoleList, roleTerminate } from "@/api/modules/roleManagement";
import { computed, reactive, ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { Plus } from "@element-plus/icons-vue";
import modalAssociatedUsers from "@/views/sysManagement/role_management/component/modal_associated_users.vue";
import modalAddOrEdit from "@/views/sysManagement/role_management/component/modal_add_or_edit.vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
const route = useRoute();
const authStore = useAuthStore();
const thisPermission = computed(() => authStore.permissionListGet[route.name as string] || {});
// import { ElMessage } from "element-plus";
// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<Role.ResRoleList>[]>([
  { type: "index", label: "#", width: 80 },
  { prop: "name", label: "角色名称", search: { el: "input", label: "名称" }, width: 150 },
  { prop: "desc", label: "描述", minWidth: 200 },
  { prop: "update_at", label: "更新时间", width: 200 },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ org_id: "" });
// 关联用户
const associatedUsersRef = ref<InstanceType<typeof modalAssociatedUsers> | null>(null);
// 新建编辑角色
const addOrEditRoleRef = ref<InstanceType<typeof modalAddOrEdit> | null>(null);
const openDialog = (ref: string, id: number = 0) => {
  if (ref == "associatedUsersRef") associatedUsersRef.value?.openDialog(id);
  if (ref == "addOrEditRoleRef") addOrEditRoleRef.value?.openDialog(id);
};
// 删除角色
const deleteAccount = async (params: any[]) => {
  const toDoList: string[] = [];
  const notToDoList: string[] = [];
  const ids: number[] = params.map(item => {
    if (item.id) {
      toDoList.push(item.name);
    } else {
      notToDoList.push(item.name);
    }
    return item.id;
  });
  await useHandleData(roleTerminate, { ids: ids }, ["删除", "角色"], toDoList, notToDoList);
  proTable.value?.getTableList();
};
const refresh = () => {
  proTable.value?.getTableList();
};
</script>

<style lang="scss" scoped>
.main-box {
  flex-direction: row;
  height: 100%;
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
</style>
